<div class="search-header">
	<div class="search-form-wp">
		<p class="search-title"><span>Find your home</span></p>
		<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
			<ul>
				<li>
					<label>Location</label>
					<div class='styled-select'>
						<select id="s-location" name="s-location">
							<option value=''>-- Select --</option>
							<?php 
								$localtions = get_terms('location', 'orderby=name&hide_empty=0');
								foreach($localtions as $localtion){
									echo "<option value='$localtion->term_id'>$localtion->name</option>";
								}
							?>
						</select>
					</div>
				</li>
				<li>
					<label>Type</label>
					<div class='styled-select'>
					   <select name='s-type' id='s-type'>
					   	   <option value=''>-- Select --</option>
						   <?php 
								$types = get_terms('property-type', 'orderby=name&hide_empty=0');
								foreach($types as $type){
									echo "<option value='$type->term_id'>$type->name</option>";
								}
							?>
					   </select>
					</div>
				</li>
				<li>
					<label>Beds</label>
					<div class='styled-select'>
					   <select name='s-bed'>
					   	   <option value=''>-- Select --</option>
						   <?php 
						   		for($i=1; $i<=5;$i++){
						   			echo "<option value='$i'>$i</option>";
						   		}
						   ?>
						   <option value='more'>More</option>
					   </select>
					</div>
				</li>
				<li>
					<label>Baths</label>
					<div class='styled-select'>
					   <select name='s-tolet'>
						   <option value=''>-- Select --</option>
						   <?php 
						   		for($i=1; $i<=5;$i++){
						   			echo "<option value='$i'>$i</option>";
						   			
						   		}
						   ?>
						   <option value='more'>More</option>
					   </select>
					</div>
				</li>
				<!--<li>
					<label>Status</label>
					<div class='styled-select'>
					   <select>
						   <option>Type one</option>
						   <option>Type two</option>
						   <option>Type three</option>
						   <option>Type four</option>
					   </select>
					</div>
				</li>-->
				<li>
					<label>Price range</label>
					<input type="text" id="amount" class="amount" style="border:0; color:#E74C3C; font-weight:bold;">
					<input type="hidden" name="s-amount" id="s-amount"/>
					<div class="clear"></div>
					<div id="slider-range"></div>			
						 <script>
						  jQuery( "#slider-range" ).slider({
						  	range: true,
						  	min: 0,
						  	max: 1000000,
						  	values: [ 0, 1000000 ],
						  	slide: function( event, ui ) {
						  	jQuery( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
						  	jQuery( "#s-amount" ).val(ui.values[ 0 ] + "-" + ui.values[ 1 ] );
						  }
						  });
						  jQuery( "#amount" ).val( "$" + jQuery( "#slider-range" ).slider( "values", 0 ) +
						  " - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
						  jQuery( "#s-amount" ).val(jQuery( "#slider-range" ).slider( "values", 0 ) +
						  "-" + jQuery( "#slider-range" ).slider( "values", 1 ) );
						 </script>
				</li>
				<li>
					<input type="submit" id="searchsubmit" value="Search" class="submit" />
				</li>
				<div class="clear"></div>
			</ul>
			<input type="hidden" value="" name="s" id="s" />
		</form>
	</div><!--end .search-form-->
</div><!--end search-header-->